<template>
  <div class="container">
    <el-card>
      <el-row style="padding-bottom: 10px">
        <el-col>
          <el-row type="flex" justify="space-between">
            <span style="font-size: 12px; color: hotpink">
              说明:目前支持学科和关键字条件筛选
            </span>
            <el-button icon="" type="success" @click="addbtnclick">
              新增试题</el-button
            >
          </el-row>
        </el-col>
      </el-row>
      <QueryQuestions @querydatainfo="querydatainfo"></QueryQuestions>
      <el-alert
        type="info"
        show-icon
        :title="`数据一共 ${counts} 条`"
      ></el-alert>
      <el-tabs>
        <el-tab-pane>
          <template #label>
            <span @click="showAll">全部</span>
          </template>
        </el-tab-pane>
        <el-tab-pane>
          <template #label>
            <span @click="auditstatus(0)">待审核</span>
          </template>
        </el-tab-pane>
        <el-tab-pane>
          <template #label>
            <span @click="auditstatus(1)">已审核</span>
          </template>
        </el-tab-pane>
        <el-tab-pane>
          <template #label>
            <span @click="auditstatus(2)">已拒绝</span>
          </template>
        </el-tab-pane>
      </el-tabs>
      <el-table :data="list">
        <el-table-column label="试题编号" prop="number"></el-table-column>
        <el-table-column label="学科" prop="subject"></el-table-column>
        <el-table-column label="目录" prop="catalog"></el-table-column>
        <el-table-column label="题干" width="200px">
          <template v-slot="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column label="题型">
          <template v-slot="scope">
            {{ getquestionType(scope.row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addDate">
          <template v-slot="scope">
            {{ getTimeparse(scope.row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column label="难度">
          <template v-slot="scope">
            {{ getdifficulty(scope.row.difficulty) }}
          </template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator"></el-table-column>
        <el-table-column label="审核状态">
          <template v-slot="scope">
            {{ getchkStatus(scope.row.chkState) }}
          </template>
        </el-table-column>
        <el-table-column label="审核意见" prop="chkRemarks"></el-table-column>
        <el-table-column label="审核人" prop="creator"></el-table-column>
        <el-table-column label="发布状态">
          <template v-slot="scope">
            {{
              scope.row.chkState
                ? getpublishType(scope.row.publishState)
                : `待发布`
            }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200px">
          <template v-slot="scope">
            <el-row type="flex">
              <el-col>
                <el-button
                  type="text"
                  size="small"
                  @click="previewbtnclick(scope.row.id)"
                  >预览</el-button
                >
              </el-col>
              <el-col>
                <el-button
                  type="text"
                  size="small"
                  @click="auditbtnclick(scope.row.id)"
                  :disabled="scope.row.chkState != 0"
                  >审核</el-button
                >
              </el-col>
              <el-col>
                <el-button
                  type="text"
                  size="small"
                  @click="$router.push(`/questions/new?id=${scope.row.id}`)"
                >
                  修改
                </el-button>
              </el-col>
              <el-col>
                <el-button
                  type="text"
                  size="small"
                  @click="publishstatechange(scope.row.id)"
                  >{{ scope.row.publishState ? `下架` : `上架` }}</el-button
                >
              </el-col>
              <el-col>
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.publishState == true"
                  @click="delbtnclick(scope.row.id)"
                  >删除</el-button
                >
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="space-between">
        <el-col></el-col>
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pagination.pagesize"
          :current-page.sync="pagination.page"
          @size-change="currentsizechange"
          @current-change="currentpagechange"
        ></el-pagination>
      </el-row>
    </el-card>
    <el-dialog :visible.sync="showdialog" v-if="showdialog" title="精选题库">
      <PreviewQuestions
        :isChoice="true"
        :currentId="currentId"
      ></PreviewQuestions>
    </el-dialog>
    <!-- 审核的修改 -->
    <el-dialog :visible.sync="showaudit" title="审核" width="400px">
      <el-radio-group v-model="auditinfo.chkState" class="audit">
        <el-radio :label="1">通过</el-radio>
        <el-radio :label="2">拒绝</el-radio>
        <el-input
          v-model="auditinfo.chkRemarks"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="请输入审核意见"
        ></el-input>
        <el-button @click="showaudit = false">取消</el-button>
        <el-button @click="submitauditstate">确认</el-button>
      </el-radio-group>
    </el-dialog>
  </div>
</template>

<script>
import {
  questionType,
  difficulty,
  chkType,
  publishType,
} from "@/api/hmmm/constants";
import {
  choice,
  choiceCheck,
  detail,
  choicePublish,
  remove,
} from "@/api/hmmm/questions";
import { parseTime, formatTime } from "@/utils/index";
export default {
  data() {
    return {
      showaudit: false,
      showdialog: false,
      list: [{}],
      pagination: {
        page: 1,
        pagesize: 2,
      },
      counts: 1,
      currentId: NaN,
      auditinfo: {
        id: 25,
        chkRemarks: ``,
        chkState: 1,
      },
    };
  },

  components: {
    QueryQuestions: () => {
      return import("@/module-hmmm/components/questions-query");
    },
    PreviewQuestions: () => {
      return import("@/module-hmmm/components/questions-preview");
    },
  },
  created() {
    this.loadchoiceList();
  },

  methods: {
    /* 用于初始化table实现 刷新或渲染 */
    async loadchoiceList() {
      // this.pagination = { ...this.formData };
      this.pagination = { ...this.pagination, ...this.formdata };
      const { data: res } = await choice(this.pagination);
      this.counts = res.counts;
      this.list = res.items;
    },
    querychoices(choices) {
      console.log(`choices`, choices);
      this.list = choices;
    },
    /* 题型枚举 */
    getquestionType(value) {
      const Type = questionType.find((item) => {
        return item.value == value;
      });
      return Type ? Type.label : `未知`;
    },
    /* 录入时间转换 */
    getTimeparse(time) {
      return parseTime(time, "{yy}-{mm}-{dd}");
    },
    /* 难度转换 */
    getdifficulty(value) {
      const currentdefaulty = difficulty.find((item) => {
        return item.value == value;
      });
      return currentdefaulty ? currentdefaulty.label : `未知`;
    },
    getchkStatus(value) {
      const checkstatus = [
        { label: `待审核`, value: 0 },
        { label: `已审核`, value: 1 },
        { label: `已拒绝`, value: 2 },
      ];

      const currentchkType = checkstatus.find((item) => {
        return item.value == value;
      });
      return currentchkType ? currentchkType.label : `未知`;
    },
    getpublishType(value) {
      const publishTYPE = [
        {
          value: 2,
          label: "待发布",
        },
        {
          value: 1,
          label: "已发布",
        },
        {
          value: 0,
          label: "已下架",
        },
      ];

      const currentpublishType = publishTYPE.find((item) => {
        return item.value == value;
      });
      return currentpublishType ? currentpublishType.label : `未知`;
    },
    currentsizechange(size) {
      this.pagination.pagesize = size;
      this.loadchoiceList();
    },
    currentpagechange(page) {
      this.pagination.page = page;
      this.loadchoiceList();
    },
    previewbtnclick(id) {
      this.showdialog = true;
      this.currentId = id;
    },
    showAll() {
      this.pagination = {
        page: 1,
        pagesize: 100,
      };
      this.loadchoiceList();
      // console.log(1);
    },
    auditstatus(chkState) {
      this.pagination = {
        page: 1,
        pagesize: 100,
        chkState,
      };
      this.loadchoiceList();
    },

    auditbtnclick(id) {
      console.log(id);
      this.currentId = id;
      this.showaudit = true;
      this.loadforfillaudit(id);
    },
    /* 审题表单回填 */
    async loadforfillaudit(id) {
      const { data: res } = await detail({ id });
      console.log(res);
      this.auditinfo.id = res.id;
      this.auditinfo.chkRemarks = res.chkRemarks;
      this.auditinfo.chkState = res.chkState;
    },
    async doaudit() {
      const res = await choiceCheck(this.auditinfo);
      console.log(res);
      /* 刷新 */
      this.loadchoiceList();
      this.showaudit = false;
    },
    /* 提交题目审核 */
    submitauditstate() {
      this.doaudit();
    },

    /* 提交上架状态确认框 */
    publishstatechange(id) {
      this.$confirm(`确认修改发布状态`, `修改发布状态`)
        .then(() => {
          this.submitpublishstate(id);
        })
        .catch(() => {});
    },

    async submitpublishstate(id) {
      const { data: datainfo } = await detail({ id });
      /* 隐式转换 +取反  */
      datainfo.publishState = +!datainfo.publishState;
      datainfo.publishState
        ? this.$message.success(`上架成功`)
        : this.$message.success(`下架成功`);
      await choicePublish(datainfo);
      /* 请求后刷新 */
      this.loadchoiceList();
    },
    delbtnclick(id) {
      this.$confirm(`确认删除`, `删除当前精选题目`)
        .then(async () => {
          const { data: datainfo } = await detail({ id });
          await remove(datainfo);
          /* 优化请求前的page */
          this.list.length == 1 ? this.pagination.page-- : ``;
          /* 刷新 */
          this.loadchoiceList();
          this.$message.success(`删除成功`);
        })
        .catch(() => {});
    },
    addbtnclick() {
      this.$router.push(`/questions/new`);
    },
    querydatainfo(formdata) {
      console.log(formdata);
      if (Object.values(formdata).length) {
        this.pagination = { ...this.pagination, ...formdata };
        this.loadchoiceList();
      } else {
        /* 如果formdata为空则初始化pagination 删除上次已有的属性*/
        this.pagination = { page: 1, pagesize: 100 };
        this.loadchoiceList();
        this.pagination = { page: 1, pagesize: 5 };
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.audit {
  .el-radio {
    margin-bottom: 20px;
  }
}
</style>
